<!-- 图表 》 多个曲线图 -->

<template>
  <EasyChart :baseOption="OPTION" :option="option" :onClick="toClick" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixChart from '../mixChart'

const name = 'ChartLineMulti'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixChart],

  /**
   * 属性注册
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 基础配置
     */
    OPTION() {
      const { AREA, LINE, SHADOW } = CORE.WEB.BASE.COLOR
      const { noTip, nameList, area, init } = this
      const tooltip = noTip ? { show: false } : {}
      const keyList = Object.keys(LINE)
      const series = []
      nameList.forEach((name, i) => {
        const obj = area ? { areaStyle: { color: AREA[keyList[i]] } } : {}
        const color = LINE[keyList[i]]
        const shadowColor = SHADOW[keyList[i]]
        const lineStyle = { color, shadowColor }
        const serie = CORE.merge({}, init.series[0], obj, { name, itemStyle: { color }, lineStyle })
        series.push(serie)
      })
      return CORE.merge({}, init, { tooltip, series })
    },

    /**
     * 图表配置
     */
    option() {
      const { xData, dataListMulti, unit, serieList, serie, lineWidth, diy } = this
      const lineStyle = { width: lineWidth }

      const option = {
        yAxis: unit ? { name: `单位：${unit}` } : {},
        xAxis: { data: xData },
        series: dataListMulti.map((data, i) => ({ ...serieList[i], ...serie, data, lineStyle })),
      }

      return CORE.merge(option, diy)
    },
  },
}
</script>
